<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>中华人民共和国成立</title>
    <link rel="stylesheet" href="resource/css/base.css">
    <link rel="stylesheet" href="resource/css/style.css">
    <style>
        .container {
            display: flex; /* 使用flexbox布局 */
            align-items: center; /* 垂直居中 */
            margin: 100px 150px; /* 居中 */

            height: auto;
        }
        .video-container {
            flex: 0 0 auto; /* 视频容器不拉伸 */
            max-width: 1000px;
            margin-right: 50px;;
            border-radius: 8px;
            overflow: hidden;
        }
        .video-container iframe {
            width: 700px; /* 设置视频宽度 */
            height: 350px; /* 设置视频高度 */
        }

        .marquee {
            width: 1000px;
            height: 500px; /* 字幕容器的高度 */
            overflow: hidden; /* 隐藏超出容器的内容 */
            position: relative;
            color: #000000;
            text-align: left;
            line-height: 50px; /* 使文字在容器中垂直居中 */
            font-size: 30px;
        }

        .marquee-content {
            display: inline-block;
            position: absolute;
            animation: marquee-up 50s linear infinite; /* 50秒循环滚动 */
        }

        @keyframes marquee-up {
            0% {
                transform: translateY(60%); /* 从底部开始 */
            }
            100% {
                transform: translateY(-100%); /* 向上移动 */
            }
        }
        .top1 li a.active {
          color: gold;
          font-size: 16px;
          background-color: #ff6c6c;
          font-weight: 700;
        }
    </style>
    <script>
        window.onload = function() {
        const navLinks = document.querySelectorAll('.top1 li a');
          // 为每个导航链接添加点击事件
          navLinks.forEach(link => {
            link.addEventListener('click', function() {
              // 移除所有链接的高亮样式      
              navLinks.forEach(link => {    
                link.classList.remove('active');    
              });   
              // 给当前点击的链接添加高亮样式   
              this.classList.add('active');  
            });  
          });
          navLinks[5].classList.add('active');
        }
    </script>
</head>
<body>
    <ul class="top1 auto clearfix">
        <li><a href="../index.html"class="nav-link">首页</a></li>
        <li><a href="../part1/partone.html"class="nav-link">鸦片战争</a></li>
        <li><a href="../part2/parttwo.html"class="nav-link">辛亥革命</a></li>
        <li><a href="../part3/partthree.html"class="nav-link">五四运动</a></li>
        <li><a href="../part4/Anti-JapaneseWar.html"class="nav-link">抗日战争</a></li>
        <li><a href="../part5/partfive.html"class="nav-link">中华人民共和国成立</a></li>
        <li style="float: right;"><a href="../part0/message.html">留言</a></li>
    </ul>
<div class="sidebar">
    <ul class="sidebar">
    <li><a href="partfive.html">首页</a></li>
    <li><a href="background.html">历史背景</a></li>
    <li><a href="liberation.html">解放战争</a></li>
    <li><a href="founding.html">新中国成立</a></li>
    <li><a href="person.html">伟大领袖</a></li>
    </ul>
</div>
    

<header>
    <h1>中华人民共和国成立</h1>
</header>


<div class="container">
    <div class="video-container">
        <iframe src="https://player.bilibili.com/player.html?bvid=BV18u4y1t7p5" scrolling="no" allowfullscreen="true" frameborder="0"></iframe>
    </div>
    <div class="marquee">
        <div class="marquee-content" id="marqueeContent">
            
        </div>
    </div>
</div>

<div class="footer auto">
    东北林业大学 © 2024 中国近代史科普
</div>

<script src="resource/js/script.js"></script>

</body>
</html>
